<!--
	This page shows the direction from start to end after you click the direction button.
-->

<?php 
$startlat = $_REQUEST['startlat'];
$startlng = $_REQUEST['startlng'];
$endlat = $_REQUEST['endlat'];
$endlng = $_REQUEST['endlng'];
$addr = $_REQUEST['addr'];
?>

<?php 
echo <<< HERE
<html class="no-js" lang="en">

<head>
   <meta charset="utf-8" />

   <title>Quick Mart</title>


   <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />
   <meta name="format-detection" content="telephone=no" />

   
   <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://code.google.com/apis/gears/gears_init.js"></script> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&libraries=geometry"></script>
<script type="text/javascript"> 
 
var start;
var end;
 
var startlat;
var startlng;
var endlat;
var endlng;
var addr;
var siberia = new google.maps.LatLng(60, 105);
var newyork = new google.maps.LatLng(40.69847032728747, -73.9514422416687);
var browserSupportFlag =  new Boolean();
  
var directionDisplay;
var directionsService = new google.maps.DirectionsService();

startlat = $startlat;
startlng = $startlng;
endlat = $endlat;
endlng = $endlng;
addr = "$addr";

start = new google.maps.LatLng(startlat, startlng);
end = new google.maps.LatLng(endlat, endlng);

HERE;

// initialize() is to show the direction from start to end.
echo <<< HERE

function initialize() {
  
  // Try W3C Geolocation method (Preferred)
  if(navigator.geolocation) {
    browserSupportFlag = true;
    navigator.geolocation.getCurrentPosition(function(position) {
		startlat = $startlat;
		startlng = $startlng;
		endlat = $endlat;
		endlng = $endlng;
		addr = "$addr";
		
		start = new google.maps.LatLng(startlat, startlng);
		end = new google.maps.LatLng(endlat, endlng);
		
		directionsDisplay = new google.maps.DirectionsRenderer();
		directionsDisplay.setPanel(document.getElementById("directionsPanel"));
		
		var request = {
				origin:start, 
				destination:end,
				travelMode: google.maps.DirectionsTravelMode.DRIVING
			};
			directionsService.route(request, function(response, status) {
				  if (status == google.maps.DirectionsStatus.OK) {
					directionsDisplay.setDirections(response);
				  }
			});
		
		
    }, function() {
      handleNoGeolocation(browserSupportFlag);
    });
  } else if (google.gears) {
    // Try Google Gears Geolocation
    browserSupportFlag = true;
    var geo = google.gears.factory.create('beta.geolocation');
    geo.getCurrentPosition(function(position) {
      initialLocation = new google.maps.LatLng(position.latitude,position.longitude);
      contentString = "Location found using Google Gears";
      map.setCenter(initialLocation);
      infowindow.setContent(contentString);
      infowindow.setPosition(initialLocation);
      infowindow.open(map);
    }, function() {
      handleNoGeolocation(browserSupportFlag);
    });
  } else {
    // Browser doesn't support Geolocation
    browserSupportFlag = false;
    handleNoGeolocation(browserSupportFlag);
  }
  
}
HERE;

// calcRoute() is to change the travel mode.
echo <<< HERE
function calcRoute() {
  var selectedMode = document.getElementById("mode").value;
  var request = {
      origin: start,
      destination: end,
      // Note that Javascript allows us to access the constant
      // using square brackets and a string value as its
      // "property."
      travelMode: google.maps.TravelMode[selectedMode]
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
  });
}
 
function handleNoGeolocation(errorFlag) {
  if (errorFlag == true) {
    initialLocation = newyork;
    contentString = "Error: The Geolocation service failed.";
  } else {
    initialLocation = siberia;
    contentString = "Error: Your browser doesn't support geolocation. Are you in Siberia?";
  }
  map.setCenter(initialLocation);
  infowindow.setContent(contentString);
  infowindow.setPosition(initialLocation);
  infowindow.open(map);
}
</script> 

</head>

<body onload="initialize()">
	<!--<div>
		<b>Mode of Travel: </b>
		<select id="mode" onchange="calcRoute();">
		  <option value="DRIVING">Driving</option>
		  <option value="WALKING">Walking</option>
		  <option value="BICYCLING">Bicycling</option>
		</select>
	</div>-->
	<div id="directionsPanel" style="float:left;width:100%; height:100%"></div>
			
</body>

HERE;
?>